<template>
  <div>
  <el-carousel :height="imgHeight" :initial-index="initialIndex" :trigger="trigger" :indicator-position="indicatorPosition" :arrow="arrow" :type="type" :loop="loop" :direction="direction" :autoplay="autoplay" :interval="interval">
    <el-carousel-item v-for="(item,index) in bannerArr" :key="index">
      <el-image class="s-width-100 s-height-100" :src="item.image_url" @click="clickBanner(item.href)"></el-image>
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script lang="ts">
  // 轮播图插件
import {Vue, Component, Watch,Prop} from "vue-property-decorator"
 type TbannerArr = {id:number,image_url:string,href:string}
@Component({
  beforeMount(){
    Vue.nextTick(()=>{ 
      (this as any).imgHeight = document.body.clientWidth*664/1920 + 'px'
    })
  }
})
export default class SCarousel extends Vue{
  imgHeight:string = ''
  //轮播图数据
  @Prop({
    default:(()=>{
      return []
    })
  }) readonly bannerArr!:TbannerArr[]|[]
  // 走马灯的高度
  @Prop({
    type:String,
    default:(()=>{
      return ''
    })
  }) readonly height!:string
  // 初始状态激活的幻灯片的索引，从 0 开始
  @Prop({
    default:(()=>{
      return 0
    })
  }) readonly initialIndex!:number
  // 指示器的触发方式 可选 click
  @Prop({
    default:(()=>{
      return ''
    })
  }) readonly trigger!:string
  // 是否自动切换
  @Prop({
    default:(()=>{
      return true
    })
  }) readonly autoplay!:boolean
  // 自动切换的时间间隔，单位为毫秒
  @Prop({
    default:(()=>{
      return 5000
    })
  }) readonly interval!:number
  // 指示器的位置 可选 outside/none
  @Prop({
    default:(()=>{
      return ''
    })
  }) readonly indicatorPosition!:string
  // 	切换箭头的显示时机 可选 always/hover/never
  @Prop({
    default:(()=>{
      return 'never'
    })
  }) readonly arrow!:string
  // 	走马灯的类型 可选 card
  @Prop({
    default:(()=>{
      return ''
    })
  }) readonly type!:string
  // 	是否循环显示
  @Prop({
    default:(()=>{
      return true
    })
  }) readonly loop!:boolean
  // 	走马灯展示的方向 可选 horizontal/vertical
  @Prop({
    default:(()=>{
      return 'horizontal'
    })
  }) readonly direction!:string
  clickBanner(href:string){
    if(href){
      this.$router.push(href)
    }
  }
}
</script>
